{% extends 'web/layout/manage.html' %}
{% load static %}
{% load issues %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-select/bootstrap-select.min.css' %}">
    <style>
        ul li {
            font-size: small;
        }

        ul li::marker {
            font-size: 20px;
        }

        .line {
            padding-left: 10px;
            font-size: small;
        }

        .dynamica {
            list-style: none;
        }

        .name-header {
            background-color: #007777;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            color: white;
            text-align: center;
            line-height: 42px;
            font-weight: 100;
            font-size: 50px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 style="display: inline-block" class="panel-title">
                    <a id="back-home"><i class="fa fa-home"></i></a>
                    工单状态 {{ order_object.order_id }}:{{ order_object.order_name }}
                </h3>
                {% if allowed %}
                    <button style="float: right;position: relative;top:-8px"
                            class="btn btn-primary" data-toggle="modal" data-target="#operatorModal">
                        执行工单
                    </button>
                {% endif %}
            </div>
            <div class="panel-body">
                <ul id="work-order-list" style="margin-left: 50px;margin-top: 20px">
                    {% for status in status_link_list %}
                        <li><span> {{ status.user }} </span><span
                                style="padding-left: 20px">{{ status.status }}</span><span
                                style="padding-left: 20px">{{ order_object.update_time }}</span></li>
                        <a class="line">I</a><br> <a class="line">I</a><br> <a class="line">I</a><br>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <i class="fa fa-list">
                    <span>工单评论</span>
                </i>
            </div>
            <div class="panel-body">
                <table class="table">
                    <tbody>
                    {% for comment in comment_list %}
                        <tr style="height: 70px">
                            <td class="col-xs-1">
                                <div class="name-header">
                                    {{ comment.user.username.0 }}
                                </div>
                            </td>
                            <td class="col-xs-11">
                                <div style="line-height: 50px">
                                    <span>{{ comment.content }}</span>
                                    <span style="float: right">{{ order_object.update_time }}</span>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
        <ul class="pagination" style="margin-top: 0;">
            {{ page_list_html | safe }}
        </ul>
    </div>
    {#    执行工单的模态框#}
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="operatorModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><b>执行工单</b></h4>
                    <p><span>编号: </span> <span>{{ order_object.order_id }}</span></p>
                    <p><span>主题: </span> <span>{{ order_object.order_name }}</span></p>
                    <p><span>描述: </span> <span>{{ order_object.order_desc }}</span></p>
                </div>
                <div class="modal-body">
                    <form id="updateOrderForm">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="status">工单状态</label>
                            <select class="form-control" id="status" name="status">
                                {% for status in status_list %}
                                    <option value="{{ status.0 }}">{{ status.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="assign">指派给</label>
                            <select class="form-control" name="assign" id="assign">
                                {% for user in user_list %}
                                    <option value="{{ user.0 }}">{{ user.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="comment">工单评论</label>
                            <textarea class="form-control" rows="3" name="comment"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" class="btn btn-primary" id="updateWorkOrder">提 交</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}

    <script>
        var UPDATEURL = '{% url 'issues_detail' project_id=request.login_user.project.id order_id=order_object.id %}'
        $(function () {
            backHome();
            updateWorkOrder();
        })

        /*
        * 返回工单列表
        * */
        function backHome() {
            $('#back-home').click(function () {
                history.back()
            })
        }

        function updateWorkOrder() {
            $('#updateWorkOrder').click(function () {
                $.ajax({
                    url: UPDATEURL,
                    type: 'POST',
                    data: $('#updateOrderForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            location.href = location.href
                        } else {
                            console.log(res);
                        }
                    }
                })
            })
        }

    </script>

{% endblock %}